<template>
  <el-dropdown class="lang-select-container" @command="handleCommand">
    <span class="el-dropdown-link">
      <svg-icon name="global" color="#333" size="22px"></svg-icon>
    </span>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh">简体中文</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { useSysStore } from '@/stores/sys.js'

const { locale } = useI18n()
const store = useSysStore()

const handleCommand = (command) => {
  locale.value = command // 切换语言
  store.changeLang(command)
}
</script>

<style scoped>
.lang-select-container {
  margin-left: 20px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  outline: none;
  img {
    width: 20px;
    height: 20px;
    margin-right: 2px;
  }
}
</style>
